<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()">

    </r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="700px" :isHandle="true" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchData: {
          btType: '',
        },
        searchForm: [
          {
            type: 'select',
            prop: 'btType',
            placeholder: '电池类型',
            options:[],
            width: 150
          }
        ],
        searchHandle: [
          {
            label: '搜索',
            type: 'success',
            icon: 'el-icon-search',
            handle: e => this.init()
          }
        ],

        tableHandles:[
          {
            label: "添加",
            type: "primary",
            handle: e => this.elFormVisible()
          },
          // {
          //   label: "导出数据",
          //   type: "primary",
          //   handle: e => {}
          // }
        ],
        tableData: [],
        tableCols: [
          {
            label: '序号',
            prop: 'id',
          },
          // {
          //   label: '押金类型',
          //   prop: 'type',
          // },
          {
            label: '电池类型',
            prop: 'btTypeName',
          },
          {
            label: '电池描述',
            prop: 'remarks',
          },
          {
            label: '押金金额',
            prop: 'money'
          },
          {
            label: '更新时间',
            prop: 'ctime'
          },
          {
            label: '操作',
            type: "button",
            width:300,
            btnList: [
              {
                label: '编辑',
                type: 'text',
                handle: (row) => this.elFormDetail(row)
              },
              {
                label: '删除',
                type: 'text',
                handle: (row) => this.del(row)
              },

            ]
          }
        ],
        tablePage: { limit: 10, page: 1, total: 0 },
        formData: {
          // type: "",
          btType: "",
          money: "",
          remarks: ""
        },
        formCols: [
          // { type: "select", label: "押金类型", width: 350, prop: "type",options:[
          //     {label:'换电押金',value:'1'},
          //     {label:'租车押金',value:'2'},
          //   ] },
          { type: "select", label: "电池类型", width: 350, prop: "btType",options:[],isDisabled:()=>{
              if(this.formData.id){
                return true
              }else{
                return false;
              }
            }},
          { type: "input", label: "押金金额", width: 350, prop: "money", remark: '元' },
          { type: "input", label: "描述", width: 350, prop: "remarks", },
        ],
        formRules: {
          type: [
            { required: true, message: '请选择', trigger: 'blur' },
          ],
          btType: [
            { required: true, message: '请选择', trigger: 'blur' },
          ],
          money: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          remarks: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
        },
        formHandle: [
          {
            label: "取消",
            handle: e => this.elFormVisible(),
          },
          {
            label: "确定",
            type: "success",
            handle: e => this.elFormSubmit(),
          },

        ],


      };
    },
    components: {},
    computed: {},
    mounted() {
      this.init();
      this.batteryTypeList();
    },
    methods: {
      async init() {
        let parm = { ...this.searchData, ...{
            pageNum:this.tablePage.page,
            pageSize:this.tablePage.limit
          } }
        let res = await this.apis.deposit_list(parm)
        if (res) {
          this.tableData = res.rows||[]
          this.tablePage.total = res.total
        }
      },
      async elFormSubmit() {
        this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.formData.id) {
              let res = await this.apis.deposit_updata(this.formData)
              if (res) {
                this.init()
                this.elFormVisible()
              }
            } else {
              let res = await this.apis.deposit_save(this.formData)
              if (res) {
                this.init()
                this.elFormVisible()
              }
            }

          }
        });
      },
      async changestate(id) {
        let res = await this.api.packchange({ id })
        if (res) {
          this.init()
        }
      },
      elFormDetail(row) {
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = row[key]+''
        })
        this.formData.id = row.id;
        this.elFormVisible()
      },
      async batteryTypeList(){
        // const res=await this.apis.batteryTypeList({
        //   pageNum:1,
        //   pageSize:10000,
        //   commonType:1
        // });
        // let list=res.rows;
        const res2=await this.apis.batteryTypeList({
          pageNum:1,
          pageSize:10000,
          commonType:2
        });
        const list2=res2.rows;

        // list=list.concat(list2);

        let options=[];
        list2.map(res=>{
          options.push({
            label:res.typeName,
            value:res.id
          })
        });

        this.searchForm[this.labIndex2(this.searchForm, 'btType')].options = options;
        this.formCols[this.labIndex2(this.formCols, 'btType')].options = options;

      },
      del(row){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          var res = await this.apis.deposit_del({
            id: row.id
          });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.init();
        }).catch(() => {

        });
      }
    }
  };
</script>
<style scoped lang='scss'>
  .el-icon-search {
    margin-right: 10px;
  }
  .Tip {
    margin-left: 20px;
  }
</style>
